<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta content="电商，手机，电脑，家电" name="keywords" />  
    <meta content="中国最大的电商，中国最大的手机，中国最大的电脑，中国最大的家电" name="description" />  
  <title>Document</title>
  <style >
    
   
    .testone{
      width: 150px;
      height: 150px;
      background: skyblue;
    }
     .bigsize{
      width: 300px;
      height: 300px;
      font-size:30px;
    }
    .active{
       color:red;
       background: blue;
    }
    #carbenchi{
      color:red;
      background: blue;
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div id="box">
      <!-- 重点3: vue渲染数据语法  {{}} 
    {{}} 渲染 可以放置任意表达式  
     算数，比较,逻辑，三元，函数  -->
       {{zname}}--{{age}}--{{hobby}}
    </div>
    <div>{{age-20>18?'成年':"未成年"}}</div>
    <div>{{48 || 0 && "你好"}}</div>
    <div>{{reCity()}}</div>
    <!-- vue 有自己的指令系统  -->
    <!-- 重点4: vue 渲染属性数据的时候 指令v-bind:属性="数据"
     v-bind 指令简写成 ：
     经常需要渲染的属性有哪些：src value id class type 
     href disabled placeholder  其他自定义属性  -->
     <img  v-bind:src="imgsrc">
     <!-- v-bind 指令简写成 ： -->
     <img :src="man" />
      <!-- 渲染a标签属性 -->
       <a :href="myahref">跳转百度</a>
     <!-- class 属性 -->
      <div :class="testclass">初始的盒子</div>
      <!-- class的三元写法 -->
        <div :class="[testclass,flag?'active':'']">三元class的盒子</div>
      <!--  class 的数组形式渲染 -->
      <div :class="[testclass,'bigsize']">多个class的盒子</div>
     <!--vue 属性的拼接 数据和字符串 在属性上的拼接-->
    <div :id="iname+'benchi'">id的拼接数据显示</div>


      <!-- 重点5 ： vue的绑定事件 指令v-on:事件名="调用的函数" 
       v-on简写成@   -->
      <!-- <button v-on:click="changeFlag">点击切换盒子的active的class</button> -->
       <button @click="changeFlag">点击切换盒子的active的class</button>
      
  </div>
  <!--错误x  不是vue的实例管理范围  -->
 <div id="content">
     {{zname}}
 </div>
    <script>
        // let zname="周杰伦"
        // let box=document.getElementById("box");
        // box.innerHTML=zname
    </script>
      <script src="./vue.js"></script>

      <script>
        // vue 需要new 实例使用
        // vue2 配置项 api
       //  面试题： vue的data为什么是一个函数
       // 答： vue组件复用高，data 是一个形成闭包形式，
       // 防止全局变量污染
        let vm=new Vue({
          el:"#app",//重点1：  声明vue实例的管理范围
          data(){ //重点2：data配置项 当前组件的数据
            return {
              zname:"周杰伦",
              age:48,
              hobby:["唱歌","跳舞","打篮球"],
              imgsrc:"https://img0.baidu.com/it/u=72263738,1949340861&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750",
              man:"https://img1.baidu.com/it/u=870854513,834463476&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
              myahref:"https://www.baidu.com",
              testclass:"testone", //class 的值
              flag:false,//控制class是否加载的变量
              iname:"car" //id的名字
            }
          },
          // 重点3：methods: 当前组件用到的所有方法
          methods:{
            reCity(){
              return "廊坊"
            },
            changeFlag(){ //
              // 改变flag 数据从而切换active的class
              // 操作vue组件的数据 在js中 用this.数据名
              // 给vue的数据赋值  this.数据名=值
              this.flag=!this.flag
            }
          }
        })
      </script>
      <script>
      new Vue({ //第二个实例
        el:"#content",
        data(){
          return {
            zname:"双截龙"
          }
        }
      })
      </script>
  
</body>
</html>